<!--
 * @Description: 区间柱状图
 * @Author: xjc
 * @Date: 2022-06-21 09:57:29
 * @LastEditTime: 2022-06-21 10:01:27
 * @LastEditors: xjc
-->
<template>
  <div id="range-container" />
</template>

<script setup>
import {onMounted} from 'vue'
// eslint-disable-next-line no-undef
const {Column} = G2Plot

onMounted(() => renderRange())

function renderRange() {
  const data = [
    {type: '分类一', values: [76, 100]},
    {type: '分类二', values: [56, 108]},
    {type: '分类三', values: [38, 129]},
    {type: '分类四', values: [58, 155]},
    {type: '分类五', values: [45, 120]},
    {type: '分类六', values: [23, 99]},
    {type: '分类七', values: [18, 56]},
    {type: '分类八', values: [18, 34]},
  ]
  const barPlot = new Column('range-container', {
    data,
    xField: 'type',
    yField: 'values',
    isRange: true,
    label: {
      position: 'middle',
      layout: [{type: 'adjust-color'}],
    }
  })

  barPlot.render()
}
</script>